<template>
  <div class="info-container">
    <div class="info-item">
      <span class="label">当前位置：</span>
      <span class="value">{{ position }}</span>
    </div>
    <div class="info-item">
      <span class="label">车次号：</span>
      <span class="value">{{ line }}</span>
    </div>
    <div class="info-item">
      <span class="label">时间：</span>
      <span class="value">{{ time }}</span>
    </div>
    <div class="info-item">
      <span class="label">日期：</span>
      <span class="value">{{ date }}</span>
    </div>
    <div class="info-item">
      <span class="label">信号状态：</span>
      <span class="value">{{ signal }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { TrainData } from '@/types/train';

// 定义响应式数据
const position = ref('K0+000');
const line = ref('00000');
const time = ref('00:00:00');
const date = ref('00-00-00');
const signal = ref('0');

// 更新数据的方法
const updateInfo = (data: TrainData) => {
  position.value = data.position;
  line.value = data.line;
  time.value = data.time;
  date.value = data.date;
  signal.value = data.signal;
};

// 连接WebSocket
onMounted(() => {
  let ws: WebSocket | null = null;
  let reconnectTimer: number | null = null;

  const connectWebSocket = () => {
    try {
      ws = new WebSocket('ws://127.0.0.1:30000');
      
      ws.onmessage = (event: MessageEvent) => {
        const data = JSON.parse(event.data);
        updateInfo(data);
      };

      ws.onerror = (error: Event) => {
        console.error('WebSocket错误:', error);
        if (ws) {
          ws.close();
        }
      };

      ws.onclose = () => {
        console.log('WebSocket连接已关闭，准备重连...');
        if (reconnectTimer === null) {
          reconnectTimer = window.setTimeout(() => {
            reconnectTimer = null;
            connectWebSocket();
          }, 1000);
        }
      };

      ws.onopen = () => {
        console.log('WebSocket连接成功');
      };
    } catch (error) {
      console.error('WebSocket连接失败:', error);
      if (reconnectTimer === null) {
        reconnectTimer = window.setTimeout(() => {
          reconnectTimer = null;
          connectWebSocket();
        }, 1000);
      }
    }
  };

  // 初始连接
  connectWebSocket();

  // 组件卸载时清理
  onUnmounted(() => {
    if (ws) {
      ws.close();
    }
    if (reconnectTimer !== null) {
      clearTimeout(reconnectTimer);
    }
  });
});

// 暴露方法给父组件
defineExpose({
  updateInfo
});
</script>

<style scoped>
.info-container {
  height: 280px;
  width: 200px;
  overflow-y: auto;
  border-radius: 12px;
  border: 3px solid #fff;
  padding: 15px;
  color: #fff;
  font-family: Arial, sans-serif;
  margin: 10px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.info-container:hover {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 8px;
  border-bottom: 1px solid #fff;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.info-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.info-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.info-item .label {
  color: #888;
  font-size: 14px;
  font-weight: 500;
}

.info-item .value {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* 自定义滚动条样式 */
.info-container::-webkit-scrollbar {
  width: 6px;
}

.info-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.info-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.info-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
</style>